<template>
  <div class="modifyData">
    <!-- Tab 标签页组件 收入支出分类 -->
    <van-tabs
      v-model=tabState
      type="card"
      color="#1989fa"
      :animated=true
      :duration=tabSpeed
      @click="handleChange"
    >
      <van-tab
        v-for="category in categories"
        :key="category.id"
        :title=category.title
      >
        <!-- Grid 宫格组件 详细分类 -->
        <van-grid :border=false>
          <van-grid-item
            v-for="data in category.data"
            :key="data.id"
            :text=data.title
          >
            <i
              class="iconfont"
              v-html=data.icon
              @click="handleChance"
              :id="data.id"
            />
            <span>{{ data.title }}</span>
          </van-grid-item>
        </van-grid>
      </van-tab>
    </van-tabs>
    <!-- CellGroup 单元格组组件 显示文本 -->
    <van-cell-group>
      <!-- Cell 单元格组件 显示时间 -->
      <van-cell :title=date value="修改时间" is-link @click="show=true" />
        <!-- 使用 title 插槽来自定义金额 -->
        <van-cell
            v-if="moneyState"
            :value=value
            is-link
            @click="handleMoney"
        >
            <template #title>
                <span class="custom-title">{{ title }}金额</span>
            </template>
        </van-cell>
      <!-- 修改金额 -->
      <van-field
          v-if="!moneyState"
          v-model=value
          type="number"
          :label='title+"金额"'
          placeholder="请输入目标金额"
          ref="moneyRef"
          @blur="handleMoney"
      />
      <!-- Field 输入框组件 显示备注输入框 -->
      <van-field
        v-model.trim="message"
        rows="2"
        autosize
        label="备注"
        type="textarea"
        maxlength="50"
        placeholder="请输入备注"
        show-word-limit
      />
    </van-cell-group>
    <!-- Popup 弹出层组件 控制时间选择组件的弹出 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '38%' }">
      <!-- DatetimePicker 时间选择组件 选择时间 -->
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="handleSure"
        @cancel="show = false"
      />
    </van-popup>
    <!-- Button 按钮组件 点击保存 -->
    <van-button
      type="primary"
      block
      color="#1989fa"
      @click="handleSave"
    >
      保存修改
    </van-button>
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast, Dialog } from 'vant'
Vue.use(Dialog)
Vue.use(Toast)
export default {
  name: 'modifyData',
  created () {
    // 进入页面后立即获取 store 中的各分类数据分类
    this.categories = this.$store.state.categories
    // 获取当前账号的数据
    const info = this.$store.state.userInfo.filter(user => user.username === this.$store.state.username)[0]
    // 获取当前选中的 id 的数据
    this.data = info.data.filter(item => item.id === this.$route.params.id)[0]
    // 当时间为今天时渲染今天，不是则渲染具体时间
    this.date = this.data.date === new Date().toLocaleDateString() ? '今天' : this.data.date
    // 获取当前数据的分类
    this.category = this.data.category
    // 获取当前数据分类的 id
    // 如果金额大于 0 时，表示时收入金额
    if (this.data.money > 0) {
      this.id = this.categories[1].data.filter(category => category.title === this.category)[0].id
      // 将 Tab 组件 设置为收入
      this.tabState = 1
      // 初次进入清除切换 Tab 滑动效果
      this.tabSpeed = 0
      // 设置 title 为收入
      this.title = '收入'
    // 如果金额小于 0时，表示支出金额
    } else {
      this.id = this.categories[0].data.filter(category => category.title === this.category)[0].id
    }
    // 将数据的分类高亮
    this.$nextTick(() => {
      document.getElementById(this.id).style.color = '#1989fa'
      // 之后恢复切换 Tab 标签滑动效果
      this.tabSpeed = 0.6
    })
    // 获取当前数据的收支金额
    this.value = Math.abs(this.data.money).toFixed(2)
    // 获取当前数据的备注信息
    this.message = this.data.message
  },
  data () {
    /**
     * categories 分类数据
     * minDate 时间选择最小日期
     * maxDate 时间选择最大日期
     * currentDate 打开时间选择组件时显示的日期， 默认为今日
     * show 时间选择组件的状态，默认为隐藏
     * date 选择的时间，默认为今日
     * value 金额的值
     * message 备注的值
     * id 选中的分类对应的id，默认为 0 表示未选中
     * name 选中当前标签页组件，默认为 0 表示选中支出
     * title 选中当前标签页组件，默认为支出
     * category 选中的分类
     */
    return {
      categories: [],
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      show: false,
      date: '今天',
      value: '',
      message: '',
      id: 0,
      name: 0,
      title: '支出',
      category: '',
      data: {},
      tabState: 0,
      tabSpeed: 0.6,
      moneyState: true,
      timeout: '',
    }
  },
  methods: {
    // 标签页组件状态改变时记录当前所在标签页
    // 将选中的分类重置
    handleChange (name, title) {
      const icons = document.querySelectorAll('.iconfont')
      for (let i = 0; i < icons.length; i++) {
        icons[i].style.color = '#a0a0a0'
      }
      this.name = name
      // 初始化数据
      this.title = title
      this.id = 0
      this.category = ''
    },
    // 点击各分类样式改变
    handleChance (event) {
      const icons = document.querySelectorAll('.iconfont')
      for (let i = 0; i < icons.length; i++) {
        icons[i].style.color = '#a0a0a0'
      }
      event.target.style.color = '#1989fa'
      // 保存被选中的 id
      this.id = event.target.id
      this.category = event.target.nextElementSibling.innerHTML
    },
    // 选择时间时点击确认
    handleSure (time) {
      const toDay = new Date().toLocaleDateString()
      const past = time.toLocaleDateString()
      // 如果选择的时间为今日，就保存为今天
      past === toDay && (this.date = '今天')
      // 其他时间保存为对应的时间，以 / 隔开
      past !== toDay && (this.date = past)
      // 关闭时间选择组件
      this.show = false
    },
    // 点击金额部分的文本和输入框状态交换
    handleMoney () {
      if (!Number(this.value)) {
        Toast.fail(this.title + '不能为0')
        return
      }
      this.moneyState = !this.moneyState
      this.value = Math.abs(Number(this.value)).toFixed(2)
      if (this.moneyState) return
      this.$nextTick(() => {
        this.$refs.moneyRef.focus()
      })
    },
    // 点击保存修改时
    handleSave () {
      // 没有选择分类时
      if (this.id === 0) {
        Toast.fail('请选择\n' + this.title + '分类')
        return
      }
      // 判断金额是否为 0
      if (!Number(this.value)) {
        Toast.fail(this.title + '不能为0')
        return
      }
      // 如果时间为今天，修改为年月日
      let date = this.date
      if (date === '今天') {
        date = new Date().toLocaleDateString()
      }
      // 将数据传输到 store 中
      this.$store.commit('handleModifyData', {
        date,
        value: Number(this.value),
        message: this.message,
        category: this.category,
        typeId: this.id,
        id: this.$route.params.id,
      })
      // 提示删除成功
      Toast.success({
        message: '修改成功',
        forbidClick: true,
      })
      // 1 秒之后跳转到 detail 页面，提升用户体验
      this.timeout = setTimeout(() => {
        this.$router.push({
          name: 'detail',
        })
      }, 1000)
    },
  },
  beforeDestroy () {
    clearTimeout(this.timeout)
  },
}
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';  /* Project id 3178775 */
  src: url('//at.alicdn.com/t/font_3178775_bq1p71t03t.woff2?t=1644579889842') format('woff2'),
       url('//at.alicdn.com/t/font_3178775_bq1p71t03t.woff?t=1644579889842') format('woff'),
       url('//at.alicdn.com/t/font_3178775_bq1p71t03t.ttf?t=1644579889842') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.iconfont{
  font-size: 40px;
  color: #a0a0a0;
  margin-bottom: 12px;
}
span{
  font-size: 14px;
}
</style>
